<template>
    <div id="ordertable-outer">
        <div id="ordertable-block">
            <div id="">
                <el-table :data="OrderData.nowOrderList" 
                style="width: 100%;"
                @ceil-click="handleCeilClick"
                >
                    <el-table-column prop="id" label="预约ID" width="100"/>
                    <el-table-column prop="name" label="预约者" width="120" />
                    <el-table-column prop="label" label="实验室" width="120" />
                    <el-table-column prop="time" label="预约时间段" width="100" />
                    <el-table-column prop="description" label="预约理由"  width="200" />
                    <el-table-column prop="create_at" label="预约创建时间" width="150"/>
                    <el-table-column prop="reason" label="预约未通过原因" width="180"/>
                    <el-table-column label="当前状态" width="120">
                        <template #default="scope">
                            <el-button v-if="scope.row.state != 0" style="background-color: #909399;color:aliceblue">未通过</el-button>
                            <el-button v-else style="background-color:#67C23A;color:aliceblue">通过</el-button>
                        </template>
                    </el-table-column>                    
                    <el-table-column label="预约修改" width="100" >
                        <template #default="scope">
                            <el-button @click="deleteOrder(scope.$index)" v-if="identify == 2" disabled="true"  type="danger">删除</el-button>
                            <el-button @click="changeOrderState(scope.$index)" v-else type="danger">修改</el-button>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </div>
        </div>
        <div id="pagination-block">
            <el-pagination
                v-model:currentPage="OrderData.currentPage"
                :page-size=10
                :small="false"
                :disabled="false"
                :background="true"
                layout="prev, pager, next"
                v-model:total="OrderData.total"
                @current-change="handleCurrentChange"
                ></el-pagination>
                <span />
                <text v-text="paginationBar"></text>
            <el-button type="primary" id="refreash-button" @click="initData()" :icon="Refresh"></el-button>
            <el-button type="success" v-if="identify == 0" id="more-button" @click="showMoreTool()">更多工具</el-button> 
        </div>
    </div>

    <div :class='`message-box-background ${isShowMoreTool && "message-box-selected"}`' >
        <div class="message-box">
            <h4>删除预约信息</h4>
            <el-date-picker
                v-model="year"
                type="year"
                placeholder="请选择一个年份"
                style="display: block;margin-bottom:10px"
            />
            
            <el-button type="primary" @click="submitDeleteOrderByYear()">提交</el-button>
            <el-button  type="info" @click="exitMoreTool()">退出</el-button>  

        </div>
    </div>
    <div :class='`message-box-background ${isChangeOrderState && "message-box-selected"}`' >
        <div class="message-box">
            <h4 >修改预约状态</h4>
           <h5>当前预约状态：
                <text v-if="isPass" style="color:#67C23A">通过</text>
                <text v-else style="color:#909399">未通过</text>
            </h5>
            <div v-if="isPass">
                <el-form-item label="理由">
                    <el-input placeholder="请给出预约不通过的理由" v-model="reason" />
                </el-form-item>
            </div>
            <div v-else>
                <h5>是否确定要给予审批通过？</h5>
            </div>
            <el-button type="primary" @click="submitUpdateOrderRequest()">提交</el-button>
            <el-button  type="info" @click="exitChange()">退出</el-button>  

        </div>
    </div>
    
</template>

<script>
    import axios from "axios"
    import {ElMessage} from "element-plus"
    import {Refresh} from "@element-plus/icons-vue"
    import {getCookie} from "@/utils/cookie.utils.js"
    

    export default {
        data() {
            return {
                reason:null,
                year:null,
                isShowMoreTool:false,
                isChangeOrderState:false,
                Refresh: Refresh,
                isPass:false,
                nowChangeIndex:0,
                identify: 2,
                OrderData:{
                    total:0,
                    currentPage:1,
                    nowOrderList:[],
                },
                
            };
        },
        computed:{
            paginationBar(){
                let that = this
                return "共"+that.OrderData.total+"条记录 第"+that.OrderData.currentPage+"/"+(Math.ceil(that.OrderData.total/10))+"页"
            }
        },
        methods:{
            deleteOrder(id){
                axios.post("/order/delete",{"id":id}).then((res)=>{
                    if(res.data.code == 0){
                        ElMessage({
                            type:"success",
                            message:"删除预约成功"
                        })
                        this.initData();
                    }else{
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg);
                    }
                })
            },
            showMoreTool(){
                this.isShowMoreTool = true;
            },
            changeOrderState(index){
                this.isChangeOrderState = true
                this.nowChangeIndex = index
                console.log(this.OrderData.nowOrderList[index].state)
                if(this.OrderData.nowOrderList[index].state == 0){
                    this.isPass = true
                }else{
                    this.isPass = false
                }
            },
            submitUpdateOrderRequest(){
                if(this.isPass){

                    console.log(this.OrderData.nowOrderList)
                    axios.post("/order/updateState",{id: this.OrderData.nowOrderList[this.nowChangeIndex].id,reason:this.reason,state:1}).then((res)=>{
                        if(res.data.code == 0){
                            ElMessage({
                                    type: "success",
                                    message: "预约修改成功"
                                })
                                this.initData()
                                this.exitChange()
                        }else{
                            ElMessage.error(res.data.code+""+res.data.msg)
                            this.initData()
                        }
                    })
                }else{
                    axios.post("/order/updateState",{id: this.OrderData.nowOrderList[this.nowChangeIndex].id,state:0}).then((res)=>{
                        if(res.data.code == 0){
                            ElMessage({
                                    type: "success",
                                    message: "预约修改成功"
                                })
                                this.initData()
                                this.exitChange()
                        }else{
                            ElMessage.error(res.data.code+""+res.data.msg)
                            this.initData()
                        }
                    })
                }
            }, 
            submitDeleteOrderByYear(){
                let nowYear = new Date().getFullYear()
                let year = this.year.getFullYear()
                if(year < nowYear){
                    axios.post("/order/deleteByYear", {year}).then((res)=>{
                        if(res.data.code == 0){
                            ElMessage({
                                type: "success",
                                message: "数据删除成功"
                            })
                            this.initData()
                            this.exitMoreTool()
                        }else{
                            ElMessage.error(res.data.code+""+res.data.msg)
                        }
                    })
                }else{
                    ElMessage.error("仅能删除过去年份的预约记录");
                }
            },
            exitChange(){
                this.isChangeOrderState = false;
            },
            exitMoreTool(){
                this.isShowMoreTool = false;
            },
            async getOrderList(page){
                axios.post("/order/queryOrders",{"page":page}).then((response) => {
                if(response.data.code == 0){
                    let data = response.data.data
                    console.log(data)
                    for(let i in data){
                        data[i].create_at = (new Date(data[i].create_at)).toLocaleDateString()
                        data[i].update_at = (new Date(data[i].update_at)).toLocaleDateString()     
                        data[i].time = new Date(data[i].start).format("yyyy-MM-dd hh:mm:ss") + " - " + new Date(data[i].end).format("hh:mm:ss")
                    }   
                    this.OrderData.nowOrderList = response.data.data
                }
                else
                {
                    ElMessage.error("error-code:"+response.data.code+" error-msg:"+response.data.msg)
                } 
            })
                
            },  
            handleCurrentChange(val){
                this.getOrderList(val)
                this.Order.currentPage = val
            },
            initData(){
                let that = this
                that.getOrderList(that.OrderData.currentPage),
                axios.post("/order/queryOrderNumber").then((res)=>{
                    console.log(res.data)
                    if(res.data.code == 0){                    
                        that.OrderData.total = res.data.data
                    }
                    else
                    {
                        ElMessage.error("error-code:"+res.data.code+" error-msg:"+res.data.msg)
                    }
                })
                
            }
        },
        mounted(){
            this.initData();
            this.identify = parseInt( getCookie("identify") )
            console.log(this.identify)
        }
    }
    
</script>

<style scopted>

#ordertable-outer{
    height: 100%;
    width:100%;
}

#ordertable{
    width:95%;
    height: 100%;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-top:5px;
    overflow: auto;
}

#ordertable-block{
    height: 90%;
    width:100%;
}


#pagination-block{
    height: 10%;
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#refreash-button{
    position:fixed;
    bottom:40px;
    right:20%;
}

#more-button{
    position:fixed;
    bottom:40px;
    right:10%;
}

.message-box-background{
    position: fixed;
    top:0px;
    right:0px;
    width:100%;
    height:100%;
    z-index:-1;
    background-color:#00000075;
    box-shadow: #a4b0be88 0px 0px 5px;
}

.message-box{
    position: fixed;
    top: 50%;
    left: 50%;
    padding-bottom:5%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top:3%;
    transform: translate(-50%, -50%);
    background-color:#a4b0be;
    box-shadow: #a4b0be88 0px 0px 5px;
    border-radius: 5px;
}

.message-box-selected{
    z-index:999;
}

</style>

